<template>
  <div class="whiteList">
    <div class="left" id="left">
      <el-card>
        <h3>验证码：</h3>
        <h1>{{ code }}</h1>
      </el-card>
      <el-card>
        <h3>新增账号：</h3>
        <br />
        <el-input
          v-model="account"
          class="input"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
        <el-button @click="addBtn">确认</el-button>
        <br />
        <br />
      </el-card>
    </div>
    <div class="right">
      <el-card>
        <el-table :data="tableData" style="width: 100%">
          <template slot="empty">
            <el-empty description="暂时没有数据"></el-empty>
          </template>

          <el-table-column prop="account" label="账号"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="info"
                size="mini"
                plain
                @click="delBtn(scope.row.account)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { systemWhiteList, systemWhiteListEdit } from "@/api/SystemManagement";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  data() {
    return {
      tableData: [],
      code: "",
      account: "",
    };
  },
  methods: {
    async getList() {
      const res = await systemWhiteList();
      if (res.code == 0) {
        this.code = res.data.code;
        this.tableData = res.data.list;
      }
    },
    delBtn(account) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await systemWhiteListEdit({
            type: "2",
            account,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "删除成功！",
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async addBtn() {
      if (this.account.length != 11) {
        this.$message({
          type: "error",
          message: "请输入正确11位手机号！",
        });
        return;
      }
      const res = await systemWhiteListEdit({
        type: "1",
        account: this.account,
      });
      if (res.code == 0) {
        this.$message({
          type: "success",
          message: "添加成功！",
        });
        this.account = "";
        this.getList();
      }
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    let that = this;
    var erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById("left"), function (element) {
      var left = element.offsetLeft;
      // var height = element.offsetHeight
      that.$nextTick(function () {
        console.log("left: " + left);
        //使echarts尺寸重置
        // that.$echarts.init(document.getElementById("eChart")).resize()
      });
    });
  },
};
</script>

<style lang="less" scoped>
.whiteList {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  .left {
    width: 30%;
    .el-card {
      margin-bottom: 20px;
      h1 {
        text-align: center;
      }
      .input {
        width: 200px;
      }
    }
  }
  .right {
    margin-left: 20px;
    width: 70%;
    height: calc(100vh - 90px);
    overflow: auto;
  }
}
</style>